<template>
  <el-card class="main">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="first">
        <div>
          <el-row>
            <el-col :span="4">

        <el-input v-model="queryUser.name" size="mini" placeholder="输入查询的用户"></el-input>
            </el-col>
            <el-col :span="6" style="margin-left: 6%">
        <el-select
          size="mini"
          placeholder="状态"
          v-model="queryUser.status"
          @change="getUserList"
        >
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
            </el-col>
            <el-col :span="2">
              <el-button @click="search()" type="primary" size="mini">查询</el-button>
            </el-col>
            <el-col :span="2">
              <el-button @click="clear()" type="primary" size="mini">清空</el-button>
            </el-col>
          </el-row>
        </div>
        <el-table
          :data="this.userList.dataList"
          highlight-current-row
          fit
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          style="margin-top: 10px"
        >
          <el-table-column align="center" label="账户名">
            <template slot-scope="scope">{{scope.row.account}}</template>
          </el-table-column>

          <el-table-column align="center" label="用户名">
            <template slot-scope="scope">{{scope.row.name}}</template>
          </el-table-column>
          <el-table-column align="center" label="性别">
            <template slot-scope="scope">{{scope.row.gender | genderFilter}}</template>
          </el-table-column>

          <el-table-column align="center" label="用户状态">
            <template slot-scope="scope">
              <el-tag
                slot="reference"
                :type="scope.row.status | typeFilter"
                style="cursor: pointer"
              >{{scope.row.status | StatusFilter}}</el-tag
              >
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="lockUser(scope.row.id)">封禁</el-button>
            <el-button type="primary" size="mini" @click="unlockUser(scope.row.id)">解封</el-button>
            </template>
          </el-table-column>

        </el-table>
        <div class="pagination">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next"
            @current-change="getUserList()"
            :current-page.sync="queryUser.pageNum"
            :page-size="queryUser.pageSize"
            :page-sizes="[2, 5, 10, 20, 50]"
            @size-change="handlePageSizeChange"
            :page-count="userList.totalPage"
            :total="userList.totalIndex"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="文章管理" name="second">
        <div>
          <el-row style="margin-left: 6%">
            <el-col :span="6">

              <el-input v-model="queryArticle.title" size="mini" placeholder="输入查询的文章标题"></el-input>
            </el-col>
            <el-col :span="2" style="margin-left: 4%">
              <el-button @click="searchTwo()" type="primary" size="mini">查询</el-button>
            </el-col>
            <el-col :span="2">
              <el-button @click="clearTwo()" type="primary" size="mini">清空</el-button>
            </el-col>
          </el-row>
        </div>
        <el-table
          :data="this.articleList.dataList"
          highlight-current-row
          fit
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          style="margin-top: 10px"
        >
          <el-table-column align="center" label="文章名称">
            <template slot-scope="scope">{{scope.row.title}}</template>
          </el-table-column>

          <el-table-column align="center" label="创建时间">
            <template slot-scope="scope">{{scope.row.createTime}}</template>
          </el-table-column>
          <el-table-column align="center" label="浏览次数">
            <template slot-scope="scope">{{scope.row.browseNum}}</template>
          </el-table-column>

          <el-table-column align="center" label="创建用户">
            <template slot-scope="scope">{{scope.row.name}}</template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button @click="deleteArticle(scope)" type="primary" size="mini">屏蔽文章</el-button>
              <el-button @click="releaseArticle(scope)" type="primary" size="mini">解除屏蔽</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next"
            @current-change="getArticleList()"
            :current-page.sync="queryArticle.pageNum"
            :page-size="queryArticle.pageSize"
            :page-sizes="[2, 5, 10, 20, 50]"
            @size-change="handlePageSizeChangeTwo"
            :page-count="articleList.totalPage"
            :total="articleList.totalIndex"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="问题管理" name="third">
        <div>
          <el-row style="margin-left: 6%">
            <el-col :span="6">

              <el-input v-model="queryQuestion.content" size="mini" placeholder="输入查询的问题内容"></el-input>
            </el-col>
            <el-col :span="2" style="margin-left: 4%">
              <el-button @click="searchThree()" type="primary" size="mini">查询</el-button>
            </el-col>
            <el-col :span="2">
              <el-button @click="clearThree()" type="primary" size="mini">清空</el-button>
            </el-col>
          </el-row>
        </div>
        <el-table
          :data="this.questionList.dataList"
          highlight-current-row
          fit
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          style="margin-top: 10px"
        >
          <el-table-column align="center" label="问题内容">
            <template slot-scope="scope">{{scope.row.content}}</template>
          </el-table-column>

          <el-table-column align="center" label="浏览次数">
            <template slot-scope="scope">{{scope.row.browseNum}}</template>
          </el-table-column>

          <el-table-column align="center" label="创建用户">
            <template slot-scope="scope">{{scope.row.name}}</template>
          </el-table-column>

          <el-table-column align="center" label="问题状态">
            <template slot-scope="scope"> <el-tag
              slot="reference"
              :type="scope.row.deleted | typeFilterTwo"
              style="cursor: pointer"
            >{{scope.row.deleted | StatusFilterTwo}}</el-tag
            ></template>
          </el-table-column>

          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button @click="deleteQuestion(scope.row.id)" type="primary" size="mini">屏蔽问题</el-button>
              <el-button @click="releaseQuestion(scope.row.id)" type="primary" size="mini">解除屏蔽</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next"
            @current-change="getQuestionList()"
            :current-page.sync="queryQuestion.pageNum"
            :page-size="queryQuestion.pageSize"
            :page-sizes="[2, 5, 10, 20, 50]"
            @size-change="handlePageSizeChangeThree"
            :page-count="questionList.totalPage"
            :total="questionList.totalIndex"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="数据统计" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
  // import PureEditor from "./editor/PureEditor";
  export default {
    name: "Manage",
    components: {

    },
    props:{
      content:{
        type: String,
        default: "first"
      }
    },
    data() {
      return {
        activeName:'first',
        statusList:[{
          label: "封禁",
          value: 0
        }, {
          label: "正常",
          value: 1
        }],
        userList: {
          dataList: [],
          totalIndex: 0,
          totalPage: 0
        },
        articleList: {
          dataList: [],
          totalIndex: 0,
          totalPage: 0
        },
        questionList: {
          dataList: [],
          totalIndex: 0,
          totalPage: 0
        },
        queryUser: {
          pageNum: 1,
          pageSize: 5,
          name: '',
          status:null
        },
        queryArticle: {
          pageNum: 1,
          pageSize: 5,
          title: '',
        },
        queryQuestion: {
          pageNum: 1,
          pageSize: 5,
          content: '',
        },
        analysis:[]
      };
    },
    filters:{
      genderFilter (status) {
        const statusMap = {
          1: '男',
          0: '女'
        }
        return statusMap[status]
      },
      StatusFilter (status) {
        const statusMap = {
          1: '正常',
          0: '封禁'
        }
        return statusMap[status]
      },
      typeFilter (status) {
        const statusMap = {
          0: 'danger',
          1: 'primary',
        }
        return statusMap[status]
      },
      StatusFilterTwo (status) {
        const statusMap = {
          0: '正常',
          1: '封禁'
        }
        return statusMap[status]
      },
      typeFilterTwo (status) {
        const statusMap = {
          1: 'danger',
          0: 'primary',
        }
        return statusMap[status]
      },
    },
    created() {
    },
    mounted() {
      this.getUserList()
      this.getArticleList()
      this.getQuestionList();
      this.getAnalysis();
    },
    methods: {
      handlePageSizeChange (selectedPageSize) {
        this.queryUser.pageNum = 1;
        this.queryUser.pageSize = selectedPageSize;
        this.getUserList();
      },
      handlePageSizeChangeTwo (selectedPageSize) {
        this.queryArticle.pageNum = 1;
        this.queryArticle.pageSize = selectedPageSize;
        this.getArticleList();
      },
      handlePageSizeChangeThree (selectedPageSize) {
        this.queryQuestion.pageNum = 1;
        this.queryQuestion.pageSize = selectedPageSize;
        this.getQuestionList();
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      getUserList()
      {
        this.$http.post("http://localhost:8989/fornote/user/manageUser",this.queryUser).then(response =>{
          this.userList.dataList=response.data.data.list;
          this.userList.totalIndex=response.data.data.total;
          this.userList.totalPage=response.data.data.pages;
        })
      },
      getArticleList()
      {
        this.$http.post("http://localhost:8989/fornote/article/manageArticle",this.queryArticle).then(response =>{
          this.articleList.dataList=response.data.data.list;
          this.articleList.totalIndex=response.data.data.total;
          this.articleList.totalPage=response.data.data.pages;
        })
      },
      getQuestionList()
      {
        this.$http.post("http://localhost:8989/fornote/question/manageQuestion",this.queryQuestion).then(response =>{
          this.questionList.dataList=response.data.data.list;
          this.questionList.totalIndex=response.data.data.total;
          this.questionList.totalPage=response.data.data.pages;
        })
      },
      getAnalysis()
      {
        this.$http.get("http://localhost:8989/fornote/user/analysis").then(response =>{
          this.analysis=response.data.data.list;
        })
      },
      lockUser(val)
      {
        this.$http.get("http://localhost:8989/fornote/user/lockUser/"+val).then(response =>{
          if(response.data.code==200)
          {
            this.$message({
              message:"封禁成功！",
              type:'success'
            })
            this.getUserList()
          }else if (response.data.code==-1){
            this.$message({
              message:response.data.msg,
              type:'warning'
            })
          }
        })
      },
      unlockUser(val)
      {
        this.$http.get("http://localhost:8989/fornote/user/unlock/"+val).then(response =>{
          if(response.data.code==200)
          {
            this.$message({
              message:"解封成功！",
              type:'success'
            })
            this.getUserList()
          }else if (response.data.code==-1){
            this.$message({
              message:response.data.msg,
              type:'warning'
            })
          }
        })
      },
      search()
      {
        this.getUserList()
      },
      clear()
      {
        this.queryUser.name=''
        this.queryUser.status=null
        this.getUserList()
      },
      searchTwo()
      {
        this.getArticleList()
      },
      clearTwo()
      {
        this.queryArticle.title=''
        this.getArticleList()
      },
      searchThree()
      {
        this.getQuestionList()
      },
      clearThree()
      {
        this.queryQuestion.content=''
        this.getQuestionList()
      },
      deleteArticle(val)
      {

      },
      releaseArticle(val)
      {

      },
      deleteQuestion(val)
      {

      },
      releaseQuestion(val)
      {

      }

    }
  }
</script>

<style scoped>
  .main{
    background-color: #F6F6F6;
    height: 100%;
    width: 80%;
    margin-left: 10%;
  }

</style>
